import { cxqst } from '@/services';
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
import { Card } from 'antd';
import { useLocation } from 'umi';

export default () => {
  const { state } = useLocation<{ gs: string; name: string }>();

  cxqst({ gs: state.gs })
    .then((res) => res.content)
    .then((data) => {
      const ds = new DataSet();

      const chart = new Chart({
        container: 'container',
        autoFit: true,
        height: 500,
        syncViewPadding: true,
      });

      chart.scale({
        value: {
          sync: true,
          nice: true,
        },
      });

      const dv = ds.createView().source(data);
      dv.transform({
        type: 'map',
        callback: (row) => {
          if (typeof row.value === 'string') {
            row.value = row.value.replace(',', '');
          }
          row.value = parseFloat(row.value);
          return row;
        },
      });
      const view = chart.createView();
      view.data(dv.rows);
      view.axis('time', {
        subTickLine: {
          count: 3,
          length: 3,
        },
        tickLine: {
          length: 6,
        },
      });
      view.axis('time', {});
      view.line().position('time*value');
      chart.render();
    });

  return (
    <Card title={<>{state.name}<span style={{color: '#999', fontSize: 12}}>({state.gs})</span></>}>
      <div
        id="container"
        style={{
          width: '100%',
          height: '100%',
        }}
      ></div>
    </Card>
  );
};
